<template>
	<view class="after-sales-container page-container">

		<!-- 申请售后 -->
		<view class="apply-section">
			<view class="section-title">
				<text class="title-text">申请售后</text>
			</view>
			<view class="apply-form">
				<view class="form-item">
					<text class="form-label">订单号</text>
					<input class="form-input" placeholder="请输入订单号" v-model="formData.orderNo" />
				</view>
				<view class="form-item">
					<text class="form-label">售后类型</text>
					<view class="form-select" @click="showTypeSelector">
						<text class="select-text">{{ selectedType ? selectedType.name : '请选择售后类型' }}</text>
						<u-icon name="arrow-down" size="16" color="#999"></u-icon>
					</view>
				</view>
				<view class="form-item">
					<text class="form-label">问题描述</text>
					<textarea class="form-textarea" placeholder="请详细描述遇到的问题" v-model="formData.description"
						maxlength="500"></textarea>
				</view>
				<view class="form-item">
					<text class="form-label">上传图片</text>
					<view class="upload-section">
						<view class="upload-list">
							<view class="upload-item" v-for="(image, index) in formData.images" :key="index">
								<image :src="image" mode="aspectFill" class="upload-image"></image>
								<view class="upload-delete" @click="deleteImage(index)">
									<u-icon name="close" size="16" color="#fff"></u-icon>
								</view>
							</view>
							<view class="upload-add" @click="chooseImage" v-if="formData.images.length < 6">
								<u-icon name="plus" size="32" color="#999"></u-icon>
								<text class="upload-text">添加图片</text>
							</view>
						</view>
						<text class="upload-tip">最多上传6张图片，支持jpg、png格式</text>
					</view>
				</view>
				<view class="form-item">
					<text class="form-label">联系方式</text>
					<input class="form-input" placeholder="请输入手机号" v-model="formData.phone" />
				</view>
			</view>
			<button class="submit-btn" @click="submitAfterSales">提交申请</button>
		</view>

		<!-- 售后记录 -->
		<view class="record-section">
			<view class="section-title">
				<text class="title-text">售后记录</text>
			</view>
			<view class="record-list" v-if="afterSalesList.length > 0">
				<view class="record-item" v-for="(item, index) in afterSalesList" :key="index"
					@click="toAfterSalesDetail(item)">
					<view class="record-header">
						<text class="record-no">申请单号：{{ item.applyNo }}</text>
						<text class="record-status"
							:class="'status-' + item.status">{{ getStatusText(item.status) }}</text>
					</view>
					<view class="record-content">
						<text class="record-order">订单号：{{ item.orderNo }}</text>
						<text class="record-type">售后类型：{{ item.type }}</text>
						<text class="record-time">申请时间：{{ item.createTime }}</text>
					</view>
				</view>
			</view>
			<view class="empty-state" v-else>
				<image src="@/static/images/cart-green.png" mode="aspectFit" class="empty-image"></image>
				<text class="empty-text">暂无售后记录</text>
			</view>
		</view>

		<!-- 售后政策 -->
		<view class="policy-section">
			<view class="section-title">
				<text class="title-text">售后政策</text>
			</view>
			<view class="policy-content">
				<view class="policy-item" v-for="(item, index) in policies" :key="index">
					<view class="policy-icon">
						<u-icon :name="item.icon" size="24" color="#1c705e"></u-icon>
					</view>
					<view class="policy-info">
						<text class="policy-title">{{ item.title }}</text>
						<text class="policy-desc">{{ item.desc }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 售后类型选择弹窗 -->
		<u-popup :show="typeSelectorShow" mode="bottom" border-radius="20" @close="typeSelectorShow = false">
			<view class="type-selector">
				<view class="selector-header">
					<text class="selector-title">选择售后类型</text>
					<u-icon name="close" size="20" color="#999" @click="typeSelectorShow = false"></u-icon>
				</view>
				<view class="selector-list">
					<view class="selector-item" v-for="(item, index) in afterSalesTypes" :key="index"
						@click="selectType(item)">
						<text class="selector-text">{{ item.name }}</text>
						<text class="selector-desc">{{ item.desc }}</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeSelectorShow: false,
				selectedType: null,
				formData: {
					orderNo: '',
					description: '',
					images: [],
					phone: ''
				},
				// 售后类型
				afterSalesTypes: [{
						id: 1,
						name: '退货退款',
						desc: '商品有质量问题或不符合描述'
					},
					{
						id: 2,
						name: '换货',
						desc: '商品有质量问题需要更换'
					},
					{
						id: 3,
						name: '仅退款',
						desc: '未收到商品或商品丢失'
					},
					{
						id: 4,
						name: '维修',
						desc: '商品需要维修服务'
					}
				],
				// 售后记录
				afterSalesList: [{
						id: 1,
						applyNo: 'AS202407040001',
						orderNo: '202407040001',
						type: '退货退款',
						status: 'processing',
						createTime: '2024-07-04 14:30:00'
					},
					{
						id: 2,
						applyNo: 'AS202407030001',
						orderNo: '202407030001',
						type: '换货',
						status: 'completed',
						createTime: '2024-07-03 10:15:00'
					}
				],
				// 售后政策
				policies: [{
						icon: 'clock',
						title: '7天无理由退换',
						desc: '商品签收7天内，无质量问题可申请退换货'
					},
					{
						icon: 'shield',
						title: '质量保证',
						desc: '商品质量问题，支持退换货或维修'
					},
					{
						icon: 'car',
						title: '免费上门',
						desc: '符合条件的售后申请，提供免费上门服务'
					},
					{
						icon: 'checkmark-circle',
						title: '快速处理',
						desc: '售后申请提交后，1-3个工作日内处理'
					}
				]
			}
		},
		onLoad(options) {
			// 如果有传入订单号，自动填入
			if (options.orderNo) {
				this.formData.orderNo = options.orderNo
			}
		},
		methods: {
			// 显示类型选择器
			showTypeSelector() {
				this.typeSelectorShow = true
			},

			// 选择售后类型
			selectType(type) {
				this.selectedType = type
				this.typeSelectorShow = false
			},

			// 选择图片
			chooseImage() {
				uni.chooseImage({
					count: 6 - this.formData.images.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.formData.images = this.formData.images.concat(res.tempFilePaths)
					}
				})
			},

			// 删除图片
			deleteImage(index) {
				this.formData.images.splice(index, 1)
			},

			// 提交售后申请
			submitAfterSales() {
				// 表单验证
				if (!this.formData.orderNo) {
					uni.showToast({
						title: '请输入订单号',
						icon: 'none'
					})
					return
				}

				if (!this.selectedType) {
					uni.showToast({
						title: '请选择售后类型',
						icon: 'none'
					})
					return
				}

				if (!this.formData.description) {
					uni.showToast({
						title: '请描述问题',
						icon: 'none'
					})
					return
				}

				if (!this.formData.phone) {
					uni.showToast({
						title: '请输入联系方式',
						icon: 'none'
					})
					return
				}

				// 提交申请
				uni.showLoading({
					title: '提交中...'
				})

				// 模拟API调用
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '申请提交成功',
						icon: 'success'
					})

					// 清空表单
					this.formData = {
						orderNo: '',
						description: '',
						images: [],
						phone: ''
					}
					this.selectedType = null
				}, 2000)
			},

			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					'pending': '待审核',
					'processing': '处理中',
					'completed': '已完成',
					'rejected': '已拒绝'
				}
				return statusMap[status] || '未知状态'
			},

			// 获取状态样式类
			getStatusClass(status) {
				return `status-${status}`
			},

			// 跳转到售后详情
			toAfterSalesDetail(item) {
				uni.navigateTo({
					url: `/pages/service/after-sales-detail?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.after-sales-container {
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.apply-section,
	.record-section,
	.policy-section {
		background-color: #ffffff;
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 40rpx;
	}

	.section-title {
		margin-bottom: 40rpx;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.apply-form {
		margin-bottom: 40rpx;
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.form-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 16rpx;
		display: block;
	}

	.form-input {
		width: 100%;
		padding: 24rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		font-size: 28rpx;
	}

	.form-select {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
	}

	.select-text {
		font-size: 28rpx;
		color: #333;
	}

	.form-textarea {
		width: 100%;
		min-height: 200rpx;
		padding: 24rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		font-size: 28rpx;
	}

	.upload-section {
		margin-top: 16rpx;
	}

	.upload-list {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}

	.upload-item {
		width: 160rpx;
		height: 160rpx;
		position: relative;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.upload-image {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
	}

	.upload-delete {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		width: 40rpx;
		height: 40rpx;
		background-color: #ff4757;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.upload-add {
		width: 160rpx;
		height: 160rpx;
		border: 2rpx dashed #e5e5e5;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.upload-text {
		font-size: 24rpx;
		color: #999;
		margin-top: 12rpx;
	}

	.upload-tip {
		font-size: 24rpx;
		color: #999;
	}

	.submit-btn {
		width: 100%;
		background-color: #1c705e;
		color: #ffffff;
		border: none;
		border-radius: 12rpx;
		padding: 24rpx;
		font-size: 32rpx;
	}

	.record-list {
		margin-top: 20rpx;
	}

	.record-item {
		padding: 30rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}

	.record-item:last-child {
		margin-bottom: 0;
	}

	.record-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.record-no {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}

	.record-status {
		font-size: 26rpx;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
	}

	.status-pending {
		background-color: #fff3cd;
		color: #856404;
	}

	.status-processing {
		background-color: #d1ecf1;
		color: #0c5460;
	}

	.status-completed {
		background-color: #d4edda;
		color: #155724;
	}

	.status-rejected {
		background-color: #f8d7da;
		color: #721c24;
	}

	.record-content {
		display: flex;
		flex-direction: column;
	}

	.record-order,
	.record-type,
	.record-time {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 40rpx;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	.policy-content {
		margin-top: 20rpx;
	}

	.policy-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;
	}

	.policy-item:last-child {
		margin-bottom: 0;
	}

	.policy-icon {
		margin-right: 20rpx;
		margin-top: 8rpx;
	}

	.policy-info {
		flex: 1;
	}

	.policy-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.policy-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
		display: block;
	}

	.type-selector {
		padding: 40rpx;
	}

	.selector-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.selector-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.selector-list {
		margin-top: 20rpx;
	}

	.selector-item {
		padding: 30rpx 0;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.selector-item:last-child {
		border-bottom: none;
	}

	.selector-text {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.selector-desc {
		font-size: 24rpx;
		color: #666;
		display: block;
	}
</style>